<template>
  <div class="dialog">
    <el-dialog
      :title="title"
      :visible.sync="visible"
      :close-on-click-modal="false"
      width="75%"
      top="20vh"
      @close="closeDialog"
    >
      <el-form
        :model="createForm"
        label-width="120px"
        label-suffix=":"
        class="searchw"
        ref="createForm"
        :rules="rule"
      >
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="经销商名称" prop="supplier">
              <el-input
                v-model.trim="createForm.supplier"
                placeholder="请输入经销商名称"
                :disabled="title == '经销商详情'"
              ></el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="8">
            <el-form-item label="类型" prop="type">
              <el-input
                v-model.trim="createForm.type"
                placeholder="请输入类型"
                :disabled="title == '经销商详情'"
              ></el-input>
            </el-form-item>
          </el-col> -->
          <el-col :span="8">
            <el-form-item label="联系人" prop="contacts">
              <el-input
                v-model.trim="createForm.contacts"
                placeholder="请输入联系人"
                :disabled="title == '经销商详情'"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="拼音码" prop="pyName">
              <el-input
                v-model.trim="createForm.pyName"
                placeholder="请输入拼音码"
                :disabled="title == '经销商详情'"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="管理费" prop="managePrice">
              <el-input
                v-model.trim="createForm.managePrice"
                placeholder="请输入管理费"
                :disabled="title == '经销商详情'"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="账号" prop="accountNumber">
              <el-input
                v-model.trim="createForm.accountNumber"
                placeholder="请输入账号"
                :disabled="title == '经销商详情'"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="预收款" prop="advanceIn">
              <el-input
                v-model.trim="createForm.advanceIn"
                placeholder="请输入预收款"
                :disabled="title == '经销商详情'"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="手机号码" prop="telephone">
              <el-input
                v-model.trim="createForm.telephone"
                placeholder="请输入手机号码"
                :disabled="title == '经销商详情'"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="联系电话" prop="phoneNum">
              <el-input
                v-model.trim="createForm.phoneNum"
                placeholder="请输入联系电话"
                :disabled="title == '经销商详情'"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="传真" prop="fax">
              <el-input
                v-model.trim="createForm.fax"
                placeholder="请输入传真"
                :disabled="title == '经销商详情'"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="邮箱" prop="email">
              <el-input
                v-model.trim="createForm.email"
                placeholder="请输入邮箱"
                :disabled="title == '经销商详情'"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="地址" prop="address">
              <el-input
                v-model.trim="createForm.address"
                placeholder="请输入地址"
                :disabled="title == '经销商详情'"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客户类别" prop="supplierTypeCodeb">
              <el-input
                v-model.trim="createForm.supplierTypeCodeb"
                placeholder="请输入客户类别"
                :disabled="title == '经销商详情'"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="返利返点" prop="supplierProfit">
              <el-input
                v-model.trim="createForm.supplierProfit"
                placeholder="请输入返利返点"
                :disabled="title == '经销商详情'"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="期初应收" prop="beginNeedGet">
              <el-input
                v-model.trim="createForm.beginNeedGet"
                placeholder="请输入期初应收"
                :disabled="title == '经销商详情'"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="期初应付" prop="beginNeedPay">
              <el-input
                v-model.trim="createForm.beginNeedPay"
                placeholder="请输入期初应付"
                :disabled="title == '经销商详情'"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="累计应收" prop="allNeedGet">
              <el-input
                v-model.trim="createForm.allNeedGet"
                placeholder="请输入累计应收"
                :disabled="title == '经销商详情'"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="累计应付" prop="allNeedPay">
              <el-input
                v-model.trim="createForm.allNeedPay"
                placeholder="请输入累计应付"
                :disabled="title == '经销商详情'"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="税率" prop="taxRate">
              <el-input
                v-model.trim="createForm.taxRate"
                placeholder="请输入税率"
                :disabled="title == '经销商详情'"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="纳税人识别号" prop="taxNum">
              <el-input
                v-model.trim="createForm.taxNum"
                placeholder="请输入纳税人识别号"
                :disabled="title == '经销商详情'"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="备注" prop="description">
              <el-input
                v-model.trim="createForm.description"
                placeholder="请输入备注"
                :disabled="title == '经销商详情'"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <material-table ref="matrTable" v-if="isShow"  :title="title"></material-table>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog()">关 闭</el-button>
        <el-button type="primary" @click="confirmData('createForm')"
          >保 存</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getMarListBySupId } from '@/api/carLine'
import materialTable from './materialTable.vue'
import { validatePhone, validEmail, validateNumber } from '@/utils/validate'
export default {
  components: { materialTable },
  name: 'addBrand',
  props: {
    row: {
      type: Object,
      default: {}
    },
    title: {
      type: String,
      default: ''
    },
    value: {
      type: Boolean,
      default: false
    },
    brands: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      visible: true,
      isShow: false,
      createForm: {
        city: '',
        company: '',
        email: '',
        id: 0,
        mobile: '',
        page: 0,
        phone: '',
        province: '',
        qq: '',
        size: 0,
        supplierId: 0,
        url: '',
        username: ''
      },
      rule: {
        supplier: [
          { required: true, message: '请输入经销商名称', trigger: 'blur' }
        ],
        contacts: [
          { required: true, message: '请输入联系人', trigger: 'blur' }
        ],
        pyName: [{ required: true, message: '请输入拼音码', trigger: 'blur' }],
        managePrice: [
          { required: true, message: '请输入管理费', trigger: 'blur' },
          { validator: validateNumber, trigger: 'blur' }
        ],
        accountNumber: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请输入备注', trigger: 'blur' }
        ],
        advanceIn: [
          { required: true, message: '请输入预收款', trigger: 'blur' },
          { validator: validateNumber, trigger: 'blur' }
        ],
        telephone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { validator: validatePhone, trigger: 'blur' }
        ],
        phoneNum: [
          { required: true, message: '请输入联系电话', trigger: 'blur' }
        ],
        fax: [{ required: true, message: '请输入传真', trigger: 'blur' }],
        email: [{ required: true, message: '请输入邮箱', trigger: 'blur' },
         { validator: validEmail, trigger: 'blur' }],
        address: [{ required: true, message: '请输入地址', trigger: 'blur' }],
        supplierTypeCodeb: [
          { required: true, message: '请输入客户类别', trigger: 'blur' }
        ],
        supplierProfit: [
          { required: true, message: '请输入返利返点', trigger: 'blur' },
          { validator: validateNumber, trigger: 'blur' }
        ],
        beginNeedGet: [
          { required: true, message: '请输入期初应收', trigger: 'blur' },
          { validator: validateNumber, trigger: 'blur' }
        ],
        beginNeedPay: [
          { required: true, message: '请输入期初应付', trigger: 'blur' },
          { validator: validateNumber, trigger: 'blur' }
        ],
        allNeedGet: [
          { required: true, message: '请输入累计应收', trigger: 'blur' },
          { validator: validateNumber, trigger: 'blur' }
        ],
        allNeedPay: [
          { required: true, message: '请输入累计应付', trigger: 'blur' },
          { validator: validateNumber, trigger: 'blur' }
        ],
        taxRate: [{ required: true, message: '请输入税率', trigger: 'blur' },
          { validator: validateNumber, trigger: 'blur' }],
        taxNum: [
          { required: true, message: '请输入纳税人识别号', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    if (this.row.id) {
      this.createForm = this.row
      this.getMarListBySupId()
    }
  },
  mounted() {},
  methods: {
    getMarListBySupId() {
      let data = {
        supplierId: this.row.id,
        page: 1,
        size: 100
      }
      getMarListBySupId(data).then((res) => {
        const { code = undefined, data = null } = res.data
        if (code == 0) {
          if (data.content.length > 0) {
            this.isShow = true
            this.$nextTick(() => {
              this.$refs.matrTable.initTable(data.content)
              this.$forceUpdate()
            })
          } else {
            this.isShow = false
          }
        }
      })
    },
    confirmData(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$emit('ok', this.createForm)
        }
      })
    },
    closeDialog() {
      this.$emit('cancle')
    }
  }
}
</script>
<style scoped lang="less"></style>
